<template>
  <div class="container">
    <div class="nav">
      <van-nav-bar title="商品详情" @click-left="$router.push('/activity/sec-kill/index')">
        <template #left>
          <van-icon name="arrow-left" size="1rem" color="black" />
        </template>
      </van-nav-bar>
    </div>
    <div class="maincontent" ref="content">
      <div>
        <van-swipe :autoplay="3000">
          <van-swipe-item v-for="(logo, index) in logoList" :key="index">
            <img v-lazy="logo" style="display:block;width:100%" />
          </van-swipe-item>
        </van-swipe>
      </div>
      <div class="countDown">
        <span class="timeTitle">限时秒杀</span>
        <div class="time">
          <span class="timeDesc">距结束仅剩</span>
          <count-down :timestamp="3800" :onTimeDown="onTimeDown" />
        </div>
      </div>
      <div class="summary">
        <div class="goodsTitle">向日葵花束生日配送鲜花速递 蓝色梦幻</div>
        <div class="priceSummary">
          <div class="price">
            <div class="rushPrice">
              <span>¥</span>
              <span>45:00</span>
            </div>
            <div class="goodsPrice">
              <del>¥50.00</del>
              <span>秒杀立省¥5.00</span>
            </div>
          </div>
          <div class="hasBuyNum">
            <span>已抢：0件</span>
          </div>
        </div>
      </div>
      <div class="spec">
        <span>已选择</span>
        <span>配色/蓝色梦幻</span>
      </div>
      <div class="service" @click="serviceShow=true">
        <span>服务</span>
        <span>7天退换 正品保障</span>
      </div>
      <van-popup v-model="serviceShow" position="bottom">
        <div style="padding:.6rem">
          <div style="font-weight:700;font-size:.7rem;text-align:center;padding:.8rem 0">服务</div>

          <div class="serviceItem">
            <i class="iconfont icon-roundcheck" style="color:#ff335c" />
            <div class="serviceRight">
              <span>7天退换</span>
              <div>满足7天无理由退换货申请的前提下，包邮商品需要买家承担退货邮费，非包邮商品需要买家承担发货和退货邮费</div>
            </div>
          </div>

          <div class="serviceItem">
            <i class="iconfont icon-roundcheck" style="color:#ff335c" />
            <div class="serviceRight">
              <span>正品保障</span>
              <div>商品支持正品保障服务</div>
            </div>
          </div>

          <div style="text-align:center;margin-top:1rem">
            <button @click="serviceShow=false" class="serviceYesBtn">确定</button>
          </div>
        </div>
      </van-popup>
      <div class="store">
        <div class="storeDetail">
          <div class="storeLeft">
            <img
              src="https://uniapp.b2b2c.niuteam.cn/upload/common/images/20200417/20200417080130-201300868676.png"
              alt
            />
            <div class="storeTitle">
              <span>小米旗舰店</span>
              <div>
                <van-tag type="danger">自营</van-tag>
                <span class="avgScore">综合体验 5分</span>
              </div>
            </div>
          </div>
          <div class="storeRight">
            <ul>
              <li>宝贝描述 4.8</li>
              <li>卖家服务 5.0</li>
              <li>物流服务 4.8</li>
            </ul>
          </div>
        </div>
        <div class="storeTool">
          <button>全部商品</button>
          <button>进店逛逛</button>
          <button>会员中心</button>
        </div>
      </div>
      <div class="evaluate">
        <div class="evaluateTop">
          <span class="evaluateNum">商品评价（0）</span>
          <span class="more">查看更多</span>
        </div>
        <div class="evaluateDetail">该商品暂无评价哦</div>
      </div>

      <div class="content">
        <van-tabs v-model="tabActive" sticky>
          <van-tab title="商品详情">
            <p style="margin:0.25rem 0">
              <img
                style="width:100% !important;"
                src="https://img.alicdn.com/imgextra/i1/1744362897/O1CN01BuFMz91XGru97Ghl9_!!1744362897.jpg"
              />
              <img
                style="width:100% !important;"
                src="https://img.alicdn.com/imgextra/i1/1744362897/O1CN01m0ObCF1XGru8hzVeE_!!1744362897.jpg"
              />
              <img
                style="width:100% !important;"
                src="https://img.alicdn.com/imgextra/i4/1744362897/O1CN01gIPaht1XGru8LE0KU_!!1744362897.jpg"
              />
              <img
                style="width:100% !important;"
                src="https://img.alicdn.com/imgextra/i3/1744362897/O1CN01BOQXvz1XGru6R3Pim_!!1744362897.jpg"
              />
            </p>
          </van-tab>
          <van-tab title="售后保障">
            <div style="font-size:.8rem;color:#999;margin:0.2rem 0;text-align:center">没售后</div>
          </van-tab>
        </van-tabs>
      </div>
    </div>
    <div class="fastTool">
      <ul>
        <li @click="toShare">
          <i class="iconfont icon-share_light" />
          <span>分享</span>
        </li>
        <li @click="toFavor" :style="isFavor  && 'color:red'">
          <i class="iconfont icon-favor_light" />
          <span>关注</span>
        </li>
        <li @click="toTop">
          <i class="iconfont icon-top" />
        </li>
      </ul>
    </div>
    <van-share-sheet v-model="showShare" title="立即分享给好友" :options="options" @select="onSelect" />
    <div class="footer">
      <ul>
        <li>
          <van-icon name="wap-home-o" />
          <span>首页</span>
        </li>
        <li>
          <van-icon name="chat-o" />
          <span>客服</span>
        </li>
        <li>
          <van-icon name="cart-o" />
          <span>购物车</span>
        </li>
      </ul>
      <div class="buyBtn">
        <button @click="specShow=true">立即抢购</button>
      </div>
    </div>
    <van-popup v-model="specShow" position="bottom">
      <div class="specContainer">
        <div class="specHeader">
          <img
            src="https://uniapp.b2b2c.niuteam.cn/upload/9/common/images/20200420/20200420115612158735497285781_mid.jpg"
            alt
          />
          <div class="specSummary">
            <span>￥45.00</span>
            <span>库存501件</span>
            <span>已选择：配色</span>
          </div>
        </div>
        <div class="specDetail">
          <dl v-for="(val,inx) in specList" :key="inx">
            <dt>{{val.title}}</dt>
            <dd
              v-for="(item,key) in val.items"
              :key="key"
              :class="val.itemActive===item.id && 'specActive'"
              @click="selectSpecItem(val.id,item.id)"
            >{{item.title}}</dd>
          </dl>
        </div>
        <div class="specNum">
          <span>购买数量</span>
          <van-stepper v-model="buyNum" max="10" />
        </div>
        <div class="specYesBtn">
          <button @click="toCheckout">确定</button>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
import Vue from "vue";
import {
  NavBar,
  Icon,
  Tag,
  Tabs,
  Tab,
  ShareSheet,
  Toast,
  Popup,
  Stepper,
  Swipe,
  SwipeItem,
  Lazyload
} from "vant";
import CountDown from "@/components/countDown";
Vue.use(Lazyload);
export default {
  components: {
    "van-nav-bar": NavBar,
    "van-icon": Icon,
    "van-tag": Tag,
    "van-tabs": Tabs,
    "van-tab": Tab,
    "van-share-sheet": ShareSheet,
    "van-popup": Popup,
    "van-stepper": Stepper,
    "count-down": CountDown,
    "van-swipe": Swipe,
    "van-swipe-item": SwipeItem
  },
  data() {
    return {
      tabActive: 0,
      showShare: false,
      options: [{ name: "生成分享海报", icon: "wechat" }],
      isFavor: false,
      serviceShow: false,
      specShow: false,
      buyNum: 1,
      logoList: [
        "https://uniapp.b2b2c.niuteam.cn/upload/9/common/images/20200420/20200420115612158735497285781_big.jpg"
      ],
      specList: [
        {
          id: 1,
          title: "配色",
          itemActive: 1,
          items: [
            { id: 1, title: "蓝色梦幻" },
            { id: 2, title: "小绿清新" },
            { id: 3, title: "淡雅脱俗" }
          ]
        },
        {
          id: 2,
          title: "尺寸",
          itemActive: 0,
          items: [
            { id: 11, title: "2寸" },
            { id: 12, title: "5寸" }
          ]
        }
      ]
    };
  },
  methods: {
    onTimeDown() {
      console.log("吉时已到");
    },
    toCheckout() {
      this.$router.push("/activity/sec-kill/checkout");
    },
    toShare() {
      this.showShare = true;
    },
    toFavor() {
      this.isFavor = !this.isFavor;
    },
    toTop() {
      this.$refs.content.scrollTop = 0;
    },
    onSelect(option) {
      Toast(option.name);
      this.showShare = false;
    },
    selectSpecItem(specId, itemId) {
      this.specList = this.specList.map(spec => {
        return spec.id === specId ? { ...spec, itemActive: itemId } : spec;
      });
    }
  }
};
</script>

<style lang="less">
.van-share-sheet__options {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  padding: 16px 0 16px 8px;
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
  justify-content: center;
}
.van-popup {
  position: fixed;
  max-height: 100%;
  overflow-y: visible;
  background-color: #fff;
  -webkit-transition: -webkit-transform 0.3s;
  transition: -webkit-transform 0.3s;
  transition: transform 0.3s;
  transition: transform 0.3s, -webkit-transform 0.3s;
  transition: transform 0.3s, -webkit-transform 0.3s;
  -webkit-overflow-scrolling: touch;
}
</style>
<style lang="less" scoped>
.serviceItem {
  display: flex;
  padding-bottom: 1rem;
  .serviceRight {
    margin-left: 0.4rem;
    display: flex;
    flex-direction: column;
    > span {
      font-size: 0.75rem;
      font-weight: 700;
    }
    > div {
      color: #898989;
      font-size: 0.65rem;
      padding-top: 0.4rem;
    }
  }
}
.serviceYesBtn {
  padding: 0.4rem 4.5rem;
  border-radius: 0.8rem;
  border: none;
  color: white;
  background-color: #ff335c;
  font-size: 0.7rem;
}

.specContainer {
  .specHeader {
    box-sizing: border-box;
    height: 6rem;
    border-bottom: 1px solid #f4f4f4;
    > img {
      box-sizing: border-box;
      position: absolute;
      width: 6.2rem;
      height: 6.2rem;
      top: -1.2rem;
      left: 0.6rem;
      border: 0.1rem solid white;
    }
    .specSummary {
      box-sizing: border-box;
      padding: 0.4rem 0;
      height: 4.9rem;
      margin-left: 7.4rem;
      font-size: 0.7rem;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      span {
        &:nth-child(1) {
          color: #ff335c;
          font-size: 0.8rem;
        }
      }
    }
  }
  .specDetail {
    padding: 0.6rem;
    border-bottom: 1px solid #f4f4f4;
    dl {
      margin: 0;
      padding: 0.5rem 0;
      dt {
        font-size: 0.7rem;
        font-weight: 700;
        padding-bottom: 0.4rem;
      }
      dd {
        display: inline;
        font-size: 0.65rem;
        margin: 0 0.25rem 0 0;
        padding: 0.3rem 0.5rem;
        border-radius: 0.4rem;
        background-color: #e7e7e7;
        color: #666;
        border: 1px solid transparent;
      }
      .specActive {
        color: #ff7c96;
        border: 1px solid #ff7c96;
        background-color: white;
      }
    }
  }
  .specNum {
    padding: 0.6rem;
    border-bottom: 1px solid #f4f4f4;
    display: flex;
    justify-content: space-between;
    > span {
      font-size: 0.75rem;
      font-weight: 700;
    }
  }
  .specYesBtn {
    text-align: center;
    padding: 0.4rem;
    button {
      width: 80%;
      padding: 0.4rem 0;
      background-color: #ff335c;
      font-size: 0.7rem;
      border: none;
      color: white;
      border-radius: 0.8rem;
    }
  }
}

.container {
  background-color: #f7f7f7;
  position: relative;
  height: 100%;
  .nav {
    height: 2.3rem;
  }
  .maincontent {
    // &::-webkit-scrollbar {
    //   width: 0;
    // }
    box-sizing: border-box;
    height: calc(100% - 5.1rem);
    overflow-y: auto;
  }
  .fastTool {
    position: absolute;
    right: 0.4rem;
    bottom: 4rem;
    background-color: white;
    border-radius: 1rem;
    border: 1px solid #e2e2e3;
    padding: 0.6rem 0.4rem;
    ul {
      display: flex;
      flex-direction: column;
      li {
        display: flex;
        color: #898989;
        flex-direction: column;
        align-items: center;
        i {
          font-size: 1.2rem;
        }
        span {
          font-size: 0.65rem;
          padding: 0.15rem 0 0.6rem;
        }
      }
    }
  }
}
.countDown {
  height: 3.2rem;
  background-image: linear-gradient(to right, #ff335c, #ff99ae);
  display: flex;
  justify-content: space-between;
  align-items: center;
  .timeTitle {
    color: white;
    padding-left: 1rem;
    font-weight: bold;
  }
  .time {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 8.5rem;
    box-sizing: border-box;
    height: 100%;
    border-top-left-radius: 3.2rem;
    background-color: white;
    .timeDesc {
      font-size: 0.65rem;
      color: #ff335c;
      margin-bottom: 0.2rem;
      margin-left: 1rem;
    }
    ul {
      margin-left: 1rem;
      display: flex;
      font-size: 0.65rem;
      .timeNum {
        background-color: #ff335c;
        color: white;
        padding: 0.2rem;
        border-radius: 0.2rem;
      }
      .timeUnit {
        padding: 0.2rem;
        color: #ff335c;
      }
    }
  }
}
.summary {
  padding: 0.4rem;
  background-color: white;
  .goodsTitle {
    color: #333;
    font-size: 0.7rem;
    font-weight: bold;
    padding-bottom: 0.2rem;
  }
  .priceSummary {
    display: flex;
    justify-content: space-between;
    .price {
      display: flex;
      .goodsPrice {
        margin-left: 0.8rem;
        display: flex;
        flex-direction: column;
        font-size: 0.6rem;
        del {
          color: #666;
        }
        span {
          color: #ff335c;
        }
      }
      .rushPrice {
        color: #ff335c;
        span {
          &:nth-child(1) {
            font-size: 0.8rem;
            padding-right: 0.2rem;
          }
          &:nth-child(2) {
            font-size: 1.5rem;
            font-weight: 700;
          }
        }
      }
    }
    .hasBuyNum {
      color: #ff335c;
      font-size: 0.65rem;
      display: flex;
      justify-content: flex-end;
      flex-direction: column;
    }
  }
}
.spec {
  padding: 0.4rem;
  margin-top: 0.4rem;
  background-color: white;
  font-size: 0.65rem;
  display: flex;
  align-items: center;
  span {
    &:nth-child(1) {
      color: #999;
      padding-right: 0.5rem;
    }
  }
}
.service {
  padding: 0.4rem;
  margin-top: 0.4rem;
  background-color: white;
  font-size: 0.65rem;
  display: flex;
  align-items: center;
  span {
    &:nth-child(1) {
      color: #999;
      padding-right: 0.5rem;
    }
  }
}
.store {
  margin-top: 0.4rem;
  padding: 0.4rem 0.5rem;
  background-color: #a52822;
  // display: flex;
  // flex-direction: column;
  box-sizing: border-box;

  .storeDetail {
    display: flex;
    justify-content: space-between;
    // align-content:flex-start;
    .storeLeft {
      display: flex;
      img {
        width: 3.2rem;
        height: 3.2ren;
        border-radius: 0.5rem;
      }
      .storeTitle {
        display: flex;
        flex-direction: column;
        justify-content: center;
        font-size: 0.65rem;
        margin-left: 0.4rem;
        > span {
          font-weight: 800;
          color: white;
          font-size: 0.8rem;
          padding-bottom: 0.2rem;
        }
        .avgScore {
          margin-left: 0.4rem;
          font-size: 0.6rem;
          color: white;
        }
      }
    }
    .storeRight {
      font-size: 0.6rem;
      color: white;
      ul {
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        li {
          padding: 0.1rem;
        }
      }
    }
  }
  .storeTool {
    display: flex;
    justify-content: center;
    button {
      padding: 0.2rem 0.4rem;
      color: white;
      border: 1px solid rgba(247, 247, 247, 0.5);
      font-size: 0.65rem;
      background-color: transparent;
      border-radius: 0.4rem;
      &:nth-child(odd) {
        margin: 0 0.4rem;
      }
    }
  }
}
.evaluate {
  margin-top: 0.4rem;
  background-color: white;
  padding: 0.4rem;
  .evaluateTop {
    display: flex;
    justify-content: space-between;
    font-size: 0.7rem;
    .evaluateNum {
      font-weight: 700;
    }
    .more {
      color: #ff335c;
    }
  }
  .evaluateDetail {
    color: #898989;
    height: 3.5rem;
    font-size: 0.65rem;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
.content {
  margin-top: 0.4rem;
  background-color: white;
}
.footer {
  box-sizing: border-box;
  border-top: 1px solid #f7f7f7;
  height: 2.8rem;
  background-color: white;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.2rem 0.6rem;
  ul {
    display: flex;
    color: rgb(51, 51, 51);
    li {
      align-items: center;
      padding: 0.2rem 1.2rem 0.2rem 0;
      display: flex;
      flex-direction: column;
      span {
        font-size: 0.7rem;
      }
    }
  }
  .buyBtn {
    button {
      background-image: linear-gradient(to right, #ff7c96, #ff365e);
      color: white;
      border: none;
      padding: 0.4rem 2.5rem;
      font-size: 0.7rem;
      border-radius: 0.8rem;
    }
  }
}
</style>